<template>
  <div>
    <Form ref="form" :rules="formValidate" :label-width="90" :model="form">
      <FormItem label="名称" prop="name">
        <Input v-model="form.name" />
      </FormItem>
      <FormItem label="时间" prop="time">
        <Input v-model="form.time" />
      </FormItem>
      <FormItem label="车速(km/h)" prop="speed">
        <Input v-model="form.speed" />
      </FormItem>
      <FormItem label="载荷(kg)" prop="load">
        <Input v-model="form.load" />
      </FormItem>
      <FormItem label="坡度(%)" prop="gradient">
        <Input v-model="form.gradient" />
      </FormItem>
      <FormItem label="其他人是否可见" prop="isIndexShow">
        <Select v-model="form.isIndexShow">
          <Option :value="1">是</Option>
          <Option :value="0">否</Option>
        </Select>
      </FormItem>
      <FormItem label="其他人是否可用" prop="otherCanUse">
        <Select v-model="form.otherCanUse">
          <Option :value="1">是</Option>
          <Option :value="0">否</Option>
        </Select>
      </FormItem>
    </Form>
    <Row class="code-row-bg" justify="end" type="flex">
      <Button @click="cancel" style="margin-right:10px">取消</Button>
      <Button @click="save" type="primary">保存</Button>
    </Row>
  </div>
</template>
<script>
import { drivecycleApi } from "@/api/drivecycle";
export default {
  name: "DrivecycleListForm",
  components: {},
  props: {
    //是否为更新表单
    isUpdate: {
      type: Boolean,
      default: true
    },
    //更新的表单数据对象
    updateData: {
      type: Object
    }
  },
  data() {
    return {
      //表单数据
      form: {
        //名称
        name: null,
        //时间
        time: null,
        //车速(km/h)
        speed: null,
        //载荷(kg)
        load: null,
        //坡度(%)
        gradient: null,
        //创建人
        createUser: null,
        //更新人
        updateUser: null,
        isIndexShow: 1,
        otherCanUse: 1
      },
      //表单验证
      formValidate: {
        //名称
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        //时间
        time: [{ required: true, message: "请输入时间", trigger: "blur" }],
        //车速(km/h)
        speed: [
          { required: true, message: "请输入车速(km/h)", trigger: "blur" }
        ],
        //载荷(kg)
        load: [{ required: true, message: "请输入载荷(kg)", trigger: "blur" }],
        //坡度(%)
        gradient: [
          { required: true, message: "请输入坡度(%)", trigger: "blur" }
        ]
      }
    };
  },
  watch: {
    updateData: function(newValue, oldValue) {
      this.$refs["form"].resetFields();
      if (this.isUpdate) {
        for (let k in this.form) {
          this.$set(this.form, k, newValue[k]);
        }
        this.$set(this.form, "id", newValue["id"]);
      }
    },
    isUpdate: function(newValue, oldValue) {
      if (!newValue) {
        this.resetForm();
        this.$refs["form"].resetFields();
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    cancel() {
      this.resetForm();
      this.$emit("on-form-close");
    },
    save() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.isUpdate) {
            this.update();
          } else {
            this.add();
          }
        } else {
          this.$Message.error("参数验证错误，请仔细填写表单数据!");
        }
      });
    },
    resetForm() {
      this.form = {
        //id
        id: null,
        //名称
        name: null,
        //时间
        time: null,
        //车速(km/h)
        speed: null,
        //载荷(kg)
        load: null,
        //坡度(%)
        gradient: null,
        //创建人
        createUser: null,
        //更新人
        updateUser: null,
        isIndexShow: 1,
        otherCanUse: 1
      };
      this.$refs["form"].resetFields();
    },
    async add() {
      this.$Spin.show();
      let res = await drivecycleApi.addDrivecycle(this.form);
      this.$Message.success(res.msg);
      this.$Spin.hide();
      this.resetForm();
      this.$emit("on-form-close");
      this.$emit("on-resetData");
    },
    async update() {
      this.$Spin.show();
      let res = await drivecycleApi.updateDrivecycle(this.form);
      this.$Message.success(res.msg);
      this.$Spin.hide();
      this.resetForm();
      this.$emit("on-form-close");
      this.$emit("on-resetData");
    }
  }
};
</script>
